<template>
	<view class="uy-flex uy-rel" :class="{'uy-search--border': border}" :style="{'height': `${height}px`, 'background-color': backgroundColor, 'border-color': borderColor, 'border-radius': `${radius}px`}">
		<view class="uy-w-p-10 uy-text-c">
			<uni-icons type="search" :size="iconSize" :color="iconColor"></uni-icons>
		</view>
		<input class="uy-w-p-90" v-model="inputValue" type="text" :placeholder="placeholder" :placeholder-style="placeholderStyle" :disabled="disabled" :style="{'font-size': `${size}px`}" :confirm-type="confirmType" :focus="autoFocus" @input="tapTo('change', $event)" @focus="tapTo('focus')" @blur="tapTo('blur')" @confirm="tapTo('click')">
		<view class="uy-abs z-index-1 uy-h-i uy-w-p-100" v-if="disabled" @tap="tapTo('click')"></view>
	</view>
</template>

<script>
	/**
	 * @description 搜索组件
	 * @property {Number} height 自定义高度  默认33  单位px
	 * @property {Boolean} border  控制边框显示  默认true
	 * @property {String} borderColor  自定义边框颜色  默认transparent
	 * @property {Boolean} disabled  input输入框是否禁用  默认false
	 * @property {Number} iconSize  字体图标大小  默认20 单位px
	 * @property {String} iconColor  字体图标颜色  默认#999999 
	 * @property {String} placeholder  自定义输入框占位
	 * @property {Number} size  自定义字体大小  默认14  单位px 
	 * @property {String} backgroundColor 自定义背景色  默认#F2F2F2 
	 * @property {Number} radius  自定义圆角  默认15  单位px 
	 * @property {String} value  input输入的内容
	 * @property {String} confirmType 设置键盘右下角按钮的文字，仅在 type="text" 时生效。有效值 (send:	右下角按钮为“发送”, search:	右下角按钮为“搜索”, next:	右下角按钮为“下一个”, go:	右下角按钮为“前往”, done:	右下角按钮为“完成”)
	 * @property {String} searchBtnColor 搜索按钮字体颜色
	 * @property {String} searchBtnText  搜索按钮文本 默认（搜索）
	 * @property {String} searchBtnBgColor  搜索按钮背景色   
	 * @property {Boolean} autoFocus  自动获取焦点  默认false
	 * @property {Boolean} focus 获取焦点  默认false
	 * @event {Function} change 监听输入变化
	 * @event {Function} focus  聚焦时触发
	 * @event {Function} blur 失焦时触发
	 * @event {Function} click 点击完成按钮时触发
	 */
	export default {
		name:"uy-search",
		props: {
			height: {
				type: Number,
				default: 33,
			},
			border: {
				type: Boolean,
				default: true
			},
			borderColor: {
				type: String,
				default: 'transparent'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			iconSize: {
				type: Number,
				default: 20
			},
			iconColor: {
				type: String,
				default: '#999999'
			},
			placeholder: {
				type: String,
				default: '搜索关键词'
			},
			size: {
				type: Number,
				default: 14
			},
			backgroundColor: {
				type: String,
				default: '#F2F2F2'
			},
			radius: {
				type: Number,
				default: 15
			},
			value: {
				type: String,
				default: ''
			},
			confirmType: {
				type: String,
				default: 'done'
			},
			searchBtnColor: {
				type: String,
				default: ''
			},
			searchBtnText: {
				type: String,
				default: '搜索'
			},
			searchBtnBgColor: {
				type: String,
				default: ''
			},
			searchBtnSize: {
				type: [Number, String],
				default: 12
			},
			autoFocus: {
				type: Boolean,
				default: false
			},
			focus: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			placeholderStyle() {
				return `color: ${this.iconColor}`
			},
			searchBtnStyle() {
				return `color: ${this.searchBtnColor}; background: ${this.searchBtnBgColor}; font-size: ${this.searchBtnSize}px`
			}
		},
		data() {
			return {
				inputValue: this.value
			};
		},
		methods: {
			tapTo(state, e) {
				switch(state) {
					case 'change':
						this.inputValue = e.detail.value;
						this.$emit('change', e.detail.value)
						break
					case 'focus':
						this.$emit('focus')
						break
					case 'blur':
						this.$emit('blur', this.inputValue)
						break
					case 'click':
						if(this.disabled) {
							this.$emit('click')
							return
						}
						this.$emit('click', this.inputValue)
						break
					default:
						break
				}
			}
		},
		watch: {
			value(val) {
				this.inputValue = val;
			}
		}
	}
</script>

<style lang="scss">
	.uy-search--border {
		border-width: 1rpx;
		border-style: solid;
		border-color: transparent;
	}
</style>